// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item {
    id: bus_navi
    width: 400
    height: 500

//    Rectangle {
//        id: rectangle_bg
//        color: "#002e93"
//        anchors.fill: parent
//    }

    function hide()
    {
        mmultitext1.hide();
    }

    function getdistance(le) {
        if (le < 1000) {
            var s = le;
            return s + "米";
        } else {
            var s = Math.round(le / 1000);
            return "约" + s + "公里";
        }
    }

    MMultiText {
        id: mmultitext1
        x: 0
        title_text: "起点与终点"
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 5

        text_0: "起点："
        text_1: "终点："
        address_0: data_map.start_name
        address_1: data_map.end_name

        onBt0_click: backend.show_message("帮助", "请在地图点击右键选择<b>起点</b> <br><br>或在位置搜索中选择<b>起点</b>");
        onBt1_click: backend.show_message("帮助", "请在地图点击右键选择<b>终点</b> <br><br>或在位置搜索中选择<b>终点</b>");
    }

    Mbutton {
        id: mbutton_search
        x: 150
        text_size: 30
        textstring: "开始搜索"
        anchors.top: mmultitext1.bottom
        anchors.topMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 50
        pro_height: 50

        onButtonclick:
        {
            backend.bus_navi(data_map.start_x, data_map.start_y, data_map.end_x, data_map.end_y, data_map.citycode);
        }
    }

    Item {
        id: item_result
        anchors.right: parent.right
        anchors.rightMargin: 15
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.top: mbutton_search.bottom
        anchors.topMargin: 10

        ListView {
            id: list_view_result
            x: 0
            width: parent.width
            clip: true
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0
            spacing: 5
            delegate: Item {
                x: 5
                height: 44
                width: parent.width

                MouseArea
                {
                    anchors.fill: parent
                    onClicked:
                    {
//                                console.log(JSON.stringify(segmentList));
                        backend.draw_bus_change_line(index);
                        var list = eval('(' + segmentList + ')');
                        item_detail.line_num = index + 1;
                        item_detail.line_length = 0;
                        var llength = 0;
                        model_bus_navi_detail.clear();
                        for (var i = 0; i < list.length; i++)
                        {
                            var num = Number(list[i].driverLength);
                            llength += num;

                            model_bus_navi_detail.append(
                                        {
                                            "name": "从 " + list[i].startName + " 站出发，乘坐 " + list[i].busName + " 经过 " + list[i].passDepotCount + " 站到达 " + list[i].endName
                                        }
                                        );
                        }
                        item_detail.line_length = getdistance(llength);
                        item_detail.change_num = list.length;

                        bus_navi.state == "" ? bus_navi.state = "detail" : bus_navi.state = "" ;
                    }
                }

                Row {
                    id: row1
                    spacing: 10

                    Rectangle {
                        width: 40
                        height: 40
                        color: "#00000000"
                        border.color: "lightblue"
                        border.width: 2
                        radius: 40
                        smooth: true

                        Text
                        {
                            anchors.centerIn: parent
                            color: "white"
                            font.pixelSize: 18
                            text: index + 1
                        }
                    }

                    Text {
                        text: "方案" + (index + 1)
                        width: list_view_result.width - 50
                        anchors.verticalCenter: parent.verticalCenter
//                        font.bold: true
                        font.pixelSize: 26
                        color: "white"
                        elide: Text.ElideRight
                    }

//                    Text {
//                        text: "方案" + index
//                        anchors.verticalCenter: parent.verticalCenter
////                        font.bold: true
//                        color: "white"
//                        font.pixelSize: 24
//                    }


                }
            }
            model: data_map.get_model_busnavi()
        }

        Item {
            id: item_detail
            width: parent.width
            anchors.left: list_view_result.right
            anchors.leftMargin: 20
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0

            property int line_num: 0
            property int change_num: 0
            property string line_length: "0"

//            Rectangle {
//                id: rectangle1
//                x: 0
//                y: 0
//                width: 32
//                height: 33
//                color: "#ffffff"

//                MouseArea
//                {
//                    anchors.fill: parent
//                    onClicked: bus_navi.state == "" ? bus_navi.state = "detail" : bus_navi.state = "" ;
//                }
//            }

            Column {
                id: column1
                anchors.topMargin: 10
                anchors.leftMargin: 0
                anchors.fill: parent

                Column {
                    id: column2
                    y: 55
                    height: 80
                    anchors.right: parent.right
                    anchors.rightMargin: 20
                    anchors.left: parent.left
                    anchors.leftMargin: 20

                    Text {
                        id: text1
                        x: 50
                        y: 26
                        color: "#ffffff"
                        text: "方案" + item_detail.line_num
                        font.pixelSize: 24
                    }

                    Row {
                        id: row2
                        y: 23
                        height: 50
                        anchors.right: parent.right
                        anchors.rightMargin: 0
                        anchors.left: parent.left
                        anchors.leftMargin: 0
                        spacing: 26

                        Text {
                            id: text2
                            x: 30
                            y: 18
                            color: "#ffffff"
                            text: "换乘次数：" + item_detail.change_num
                            font.pixelSize: 22
                        }

                        Text {
                            id: text3
                            x: 29
                            y: 16
                            color: "#ffffff"
                            text: "总长" + item_detail.line_length
                            font.pixelSize: 22
                        }
                    }
                }

                ListView {
                    id: list_view1
                    clip: true
                    anchors.right: parent.right
                    anchors.rightMargin: 10
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.top: column2.bottom
                    anchors.topMargin: 0
                    delegate: Item {
                        x: 5
                        height: text_bus_detail.height + 10
                        width: parent.width
//                        Row {
//                            id: row3
//                            spacing: 10
//                            Rectangle {
//                                width: 40
//                                height: 40
//                                color: colorCode
//                            }

                            Text {
                                id: text_bus_detail
                                text: name
                                width: parent.width
                                anchors.verticalCenter: parent.verticalCenter
                                font.bold: true
                                font.pixelSize: 22
                                color: "white"
                                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                            }
//                        }
                    }
                    model: model_bus_navi_detail
                }
            }

            ArrowButton {
                id: arrowbutton1
                x: -30
                y: -30
                smooth: true
                scale: 0.400
                rotation: 180

                onArrow_clicked: bus_navi.state == "" ? bus_navi.state = "detail" : bus_navi.state = "" ;
            }
//            Rectangle {
//                id: rectangle1
//                x: 39
//                y: 66
//                width: 200
//                height: 200
//                color: "#ffffff"

//                MouseArea {
//                    id: mouse_area1
//                    anchors.fill: parent

//                    onClicked:
//                    {
//                        poi_search.state == "" ? poi_search.state = "detail" : poi_search.state = "" ;
//                    }
//                }
//            }
        }
    }

    ListModel
    {
        id: model_bus_navi_detail
    }

    states: [
        State {
            name: "detail"

            PropertyChanges {
                target: list_view_result
                x: -width -20
            }
        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "detail"
            ParallelAnimation {
                //                    PropertyAnimation { target: item_content; property: "opacity"; easing.type: Easing.OutCubic;}
                //                    PropertyAnimation { target: mtextinput1; property: "height"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: list_view_result; property: "x"; easing.type: Easing.OutCubic;}
            }
        },
        Transition {
            from: "detail"
            to: ""
            ParallelAnimation {
                PropertyAnimation { target: list_view_result; property: "x"; easing.type: Easing.OutCubic;}
                //                    PropertyAnimation { target: mtextinput1; property: "height"; easing.type: Easing.OutCubic;}
                //                    PropertyAnimation { target: item_content; property: "opacity"; easing.type: Easing.OutCubic;}
            }
        }
    ]
}
